<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
  .router-link-active{
    background-color: red;
  }
  .news .router-link-exact-active{
    background-color: blue;
  }
</style>
</head>
<body>

  <div id='app'>

    <router-link tag="button" to="/home">首页</router-link>
    <router-link tag="button" to="/news">新闻页</router-link>
    <router-link tag="button" to="/about">关于</router-link>
    <hr>
    <!-- 路由组件的出口 -->
    <router-view />
  </div>

<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js'></script>
<script src="./vue-router.js"></script>
<script>
  const Home = {
    template: `
      <div>
        home页
      </div>
    `
  }
  const About = {
    template: `
      <div>
        关于我们
      </div>
    `
  }
  const News = {
    template: `
      <div class="news">
        新闻页
        <br />
        <button @click="enterNative">国内新闻</button>
        <button @click="enterAbroad">国外新闻</button>
        <hr />
        <router-view />
      </div>
    `,
    mounted(){
      console.log(this);
    },
    methods: {
      enterNative(){
        this.$router.push({
          path: '/news/native'
        })
      },
      enterAbroad(){
        this.$router.push('/news/abroad')
      }
    }
  }
  // 国内新闻
  const NativeNews = {
    template: `
      <div>国内新闻</div>
    `
  }
  // 国外新闻
  const AbroadNews = {
    template: `
      <div>国外新闻</div>
    `
  }
  // 定义路由
  const routes = [   // 配置路由规则
    {
      path: '/home',
      component: Home
    },
    {
      path: '/news',
      component: News,
      children: [
        {
          path: '/news/native',
          component: NativeNews
        },
        {
          path: '/news/abroad',
          component: AbroadNews
        }
      ]
    },
    {
      path: '/about',
      component: About
    }
  ]
  const router = new VueRouter({  // 注册路由
    routes
  })
  const app = new Vue({
    el: '#app'
    ,router   // 挂载实例
  })
  /*
    引入路由之后， 实例上增加一个对象 $router
    原型上 __proto__
    push()
      跳转路由， 参数 同 router-link的to属性
    replace()
    go(n)
      0 刷新
      -1 回退1步
      1 前进1步
  */
</script>
</body>
</html>